<template>
	<!-- 项目看板 -->
	<div class="">
		<div class="tabsBox d-flex m-b20">
			<div
				class="tabsItem"
				:class="item.id == state.tabId ? 'tabsItemHover' : ''"
				v-for="item in tabsList"
				:key="item.id"
				@click="state.tabId = item.id"
			>
				{{ item.name }}
			</div>
		</div>
	</div>

	<div class="content">
   <!--	项目基本信息	-->
		<tabs1-from
			ref="tabs1From"
			:projectId="projectId"
			:projectType="projectType"
			v-if="state.tabId == 1"
      		@emitFormInline="emitFormInline"
		></tabs1-from>

		<!--	项目里程碑	-->
<!--		<Tabs2Liuchen
			:projectId="projectId"
			:projectType="projectType"
			:projectName="form.projectName"
			v-if="state.tabId == 2"
		></Tabs2Liuchen>-->

		<!--	项目里程碑	-->
		<project-milestones
				:projectId="projectId"
				:projectType="projectType"
				:projectName="form.projectName"
				v-if="state.tabId === '2'"
		/>

		<!--	项目实施情况	-->
		<Table3Implement
			:projectId="projectId"
			:projectType="projectType"
			:tab-id="tabId"
			v-if="state.tabId == 3"
			:form="form"
		></Table3Implement>

		<databaseCom
			v-if="state.tabId == 4"
			:projectTypeId="projectType"
			:projectId="projectId"
		></databaseCom>

		<MettingCom ref="metting" v-if="state.tabId == 5"></MettingCom>

		<qualitySuperVision
			v-if="isShow && state.tabId === '6'"
			:form="{
				projectName: form.projectName,
				projectCode: form.projectCode,
				dealDepartmentId: form.dealDepartmentId
			}"
		></qualitySuperVision>
	</div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import Tabs1From from "./components/Tabs1From.vue";
import Tabs2Liuchen from "./components/Tabs2Liuchen.vue";
import ProjectMilestones from "./components/projectMilestones.vue";
import Table3Implement from "./components/Table3Implement.vue";
import DatabaseCom from "@/views/constructionProjectManage/project_mt/components/database.vue";
import MettingCom from "@/views/constructionProjectManage/components/mettingIndex.vue";
import QualitySuperVision from "@/views/constructionProjectManage/project_mt/components/qualitySupervision.vue";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
import { useRouter, useRoute } from "vue-router";

let router = useRouter();
let route = useRoute();
const projectType = getURLhandler(route.path).projectType;
const projectId = getURLhandler(route.path).id;
const tabId = getURLhandler(route.path).tabId;

// tabs相关
const tabsList = ref([]);

const tabs1From = ref(null);

const state = reactive({
	tabId: "1",
});
let form = ref({
	projectName: "",
	projectCode: "",
	dealDepartmentId: "",
	type:''
});
const emitFormInline = (e) => {

  form.value = {
    ...e,
  };
};

/**
 * 是否显示
 */
const isShow = () => {
	let isPresetPlan = getURLhandler(route.path).isPresetPlan;
	return !(isPresetPlan && isPresetPlan === '1');
}

onMounted(()=>{
	if(getURLhandler(route.path).isDark!=='0'){
		tabsList.value = [{
			name: "项目基本信息",
			id: "1",
		},
			{
				name: "项目里程碑",
				id: "2",
			},
			{
				name: "项目实施情况",
				id: "3",
			},
			{
				name: "项目资料成果",
				id: "4",
			},
			{
				name: "项目会议记录",
				id: "5",
			},
	 ];
	}else{
		tabsList.value = [{
			name: "项目基本信息",
			id: "1",
		},
			{
				name: "项目里程碑",
				id: "2",
			},
			{
				name: "项目实施情况",
				id: "3",
			},
			{
				name: "项目资料成果",
				id: "4",
			},
			{
				name: "项目会议记录",
				id: "5",
			},
			{
				name: "项目质量监督",
				id: "6",
			},];
	}
});
</script>
<style lang="scss" scoped>
.tabsBox {
	margin-bottom: 30px;
	.tabsItem {
		padding: 0 30px;
		text-align: center;
		line-height: 40px;
		height: 40px;
		border: 1px solid #ccc;
		margin-right: 20px;
		border-radius: 5px;
		color: #ccc;
		cursor: pointer;
	}
	.tabsItemHover {
		border: 1px solid #fc702b;
		color: #fc702b;
		background: #fff8f6;
	}
}
</style>
